<template>
  <div class="loading-display">
    <div class="m">
      <h2 class="tit">惠州景田食品饮料有限公司</h2>
      <div class="area-ls">
        <AreaItem ref="vAreaItemA" :d="showList.A" :left-run="leftRun" @end="nextItem('A')" />
        <AreaItem ref="vAreaItemB" :d="showList.B" :left-run="leftRun" @end="nextItem('B')" />
      </div>
    </div>
    <div class="r">
      <div class="ti">2020/09/28 12:25:22</div>
      <div class="qr-a">
        <img class="qr" src="" alt="">
      </div>
      <div class="des">
        <div class="t">扫码进入</div>
        <ol>
          <li>首次进入</li>
          <li>每次排队每次排队每次排队每次排队每次排队每次排队每次排队每次排队每次排队每次排队每次排队</li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script>
import Timer from './timer'
import AreaItem from './AreaItem.vue'
export default {
  components: {
    AreaItem
  },
  data () {
    return {
      showList: { A: {}, B: {} }, // 当前显示的数据，A B 栏
      total: 0
    }
  },
  computed: {
    leftRun () {
      return this.total > 2
    }
  },
  created () {
    this.baseList = [] // 当前数据队列
    this.baseListKey = {} // 当前数据字典

    this.init()

    // 页面定时刷新
    this.timerPageUpdate = new Timer({
      callBack: () => {
        this.update()
      },
      initStart: true,
      time: 5000
    })
  },
  destroyed () {
    this.timerPageUpdate.stop()
  },
  methods: {
    nextItem (k) {
      const { hasOwnProperty } = Object.prototype
      const { baseList, baseListKey } = this
      const item = this.showList[k]
      if (hasOwnProperty.call(baseListKey, item.id)) {
        // 找得到情况才增加
        baseList.push(item)
      }
      this.showList[k] = baseList.shift()
      // const firstItem = baseList.shift()
      // if (hasOwnProperty.call(firstItem, 'id')) {
      //   this.showList[k] = firstItem
      // } else {
      //   this.showList[k] = {}
      // }
    },
    async init () {
      await this.getData()
      const { baseList, total } = this
      if (total) {
        this.showList.A = baseList.shift()
        if (total > 1) this.showList.B = baseList.shift()
      }
    },
    // 刷新数据
    async update () {
      // console.log('刷新数据')
      await this.getData()
      const { hasOwnProperty } = Object.prototype
      const { baseList, baseListKey, showList, total } = this

      const itemUpdate = name => {
        const item = showList[name]
        const id = item.id
        if (hasOwnProperty.call(baseListKey, id)) {
          // 找得到情况更新
          this.each(baseListKey[id], (v, k) => {
            item[k] = v
          })
        } else {
          this.nextItem(name)
        }
      }

      const nextEmptyItem = name => {
        const item = this.showList[name]
        if (hasOwnProperty.call(baseListKey, item.id)) {
          // 找得到情况才增加
          baseList.push(item)
        }
        this.showList[name] = {}
      }

      if (total > 1) {
        itemUpdate('A')
        itemUpdate('B')
      } else if (total === 1) {
        itemUpdate('A')
        nextEmptyItem('B')
      } else {
        nextEmptyItem('A')
        nextEmptyItem('B')
      }
    },
    async getData () {
      const data = (await require('axios').get('/mock/GetList')).data.data
      const baseList = []
      data.forEach((el, i) => {
        const carList = []
        const spaceList = el.spaceList
        let j = 0
        let carGroup
        Object.keys(spaceList).forEach(k => {
          if (k === 'carList') {
            spaceList.carList.forEach((item, m) => {
              const r = j % 5
              if (r === 0) {
                carGroup = []
              }
              carGroup.push({
                id: item.id,
                plateNum: item.plate_num,
                active: false,
                k: m === 0 ? '下一位' : `第${m + 1}顺位`
              })
              if (r === 4) {
                carList.push(carGroup)
              }
              j++
            })
          } else {
            const r = j % 5
            if (r === 0) {
              carGroup = []
            }
            const item = spaceList[k]
            carGroup.push({
              id: item.id,
              plateNum: item.plate_num,
              active: true,
              k: item.space
            })
            if (r === 4) {
              carList.push(carGroup)
            }
            j++
          }
        })
        if (j % 5 !== 0) {
          carList.push(carGroup)
        }

        baseList.push({
          id: el.id,
          title: el.title,
          carList
        })
      })
      // console.log(JSON.parse(JSON.stringify(baseList)))
      // console.log(baseList)
      // console.log(JSON.stringify(baseList))
      this.total = baseList.length
      if (this.total === 0) {
        this.baseList = baseList
      } else {
        this.updateListData(baseList)
      }
    },
    updateListData (newBaseList) {
      let { baseList, showList } = this
      const baseListKey = {}
      const newBaseListKey = {}
      const showListKey = {}
      showListKey[showList.A.id] = showList.A
      showListKey[showList.B.id] = showList.B

      newBaseList.forEach((item, i) => {
        newBaseListKey[item.id] = item
      })

      baseList.forEach((item, i) => {
        const { hasOwnProperty } = Object.prototype
        const { id } = item
        if (hasOwnProperty.call(newBaseListKey, id)) {
          baseListKey[id] = baseList[i] = newBaseListKey[id]
        } else {
          baseList[i] = undefined
        }
      })
      baseList = this.baseList = baseList.filter(item => item !== undefined)

      newBaseList.forEach((item, i) => {
        const { id } = item
        if (!hasOwnProperty.call(baseListKey, id) && !hasOwnProperty.call(showListKey, id)) {
          baseList.push(item)
        }
      })
      this.baseListKey = newBaseListKey
    },
    each (obj, fn) {
      const { hasOwnProperty } = Object.prototype
      for (const k in obj) {
        if (hasOwnProperty.call(obj, k) && fn(obj[k], k) === false) break
      }
    }
  }
}
</script>

<style>
body {
  background-color: #000;
}

.loading-display {
  color: red;
  font-size: 20px;
  color: #fff;
  display: flex;
  padding: 0 0 0 40px;
  .m {
    flex: 1 1;
  }
  .r {
    width: 330px;
  }
  .area-ls {
    /* position: relative; */
    display: flex;
  }
  .area-item {
    /* position: absolute;
    left: 0;
    right: 0;
    display: flex; */
    flex: 1;
    position: relative;
  }
  .area {
    margin: 0;
    padding: 16px 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-sizing: border-box;
  }
  dd{
    margin: 0;
    /* overflow: hidden; */
  }
  .tit {
    font-size: 30px;
    margin: 6px 0;
  }
  .a-name {
    font-size: 24px;
    padding: 10px 0;
  }

  .ti {
    font-size: 30px;
    margin: 6px 0;
  }
  .qr-a {
    padding: 30px;
  }
  .qr {
    width: 266px;
    height: 266px;
    border: 0;
  }
  .t {
    padding: 8px 6px;
  }
  ol {
    font-size: 16px;
    margin: 0;
    padding-left: 30px;
    li {
      padding: 3px 0;
    }
  }

  .slide-left-enter-active,
  .slide-left-leave-active {
    transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
    transition-property: opacity, transform;
  }
  .slide-left-enter{
    opacity: 0;
    transform: translate3d(60px, 0, 0);
  }
  .slide-left-leave-to {
    opacity: 0;
    transform: translate3d(-60px, 0, 0);
  }
}
</style>
